<template>
	<view class="app-container">
		<view class="list" v-if="indexList.length > 0">
			<u-list>
				<u-list-item v-for="item in indexList" :key="item.id">
					<u-cell>
						<view slot="title" class="u-slot-title">
							<text class="u-cell-text">{{item.xexplain}}</text>
							<text class="u-cell-time">{{item.createTime}}</text>
						</view>
						<text slot="value" class="u-slot-value">{{item.earnings}}</text>
					</u-cell>
				</u-list-item>
			</u-list>
		</view>
		<view class="empty" v-else>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getEarningsDetails
	} from "@/api/mall.js"
	export default {
		data() {
			return {
				indexList: [],
			}
		},
		onShow() {
			this.fetchList()
		},
		methods: {
			fetchList() {
				uni.showLoading()
				getEarningsDetails().then(res => {
					// console.log(res);
					uni.hideLoading()
					if (res.length > 0) {
						this.indexList = res
					} else {
						this.indexList = []
					}
				})
			}
		},
	}
</script>

<style>
	.u-slot-title{
		display: flex;
		flex-direction: column;
	}
	.u-cell-time{
		font-size: 12px;
		color: #8F9BB3;
		margin-top: 3px;
	}
	.empty {
		margin-top: 140px;
	}
</style>
